<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body,html {
            height: 100%;
        }
        ol {
            list-style: none;
            position: fixed;
            top:80px;
            left: 50px;
        }
        ol li {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
            line-height: 50px;
            margin-top: -1px;
            cursor: pointer;
        }
        ul {
            list-style: none;
            height: 100%;
        }
        /*高度继承自ul，而ul又继承自body，body继承自html，所以这几个元素都要设置高度为100%*/
        ul li {
            height: 100%;
        }
    </style>
</head>
<body>
<ul>
    <li>1区域</li>
    <li>2区域</li>
    <li>3区域</li>
    <li>4区域</li>
    <li>5区域</li>
</ul>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ol>
<script src="animate.js"></script>
<script>

    var ul = document.getElementsByTagName('ul')[0];
    var ol = document.getElementsByTagName('ol')[0];
    var ulArr = ul.children;
    var olArr = ol.children;
    var target = 0,leader=0,timer = null;
    var arrColor = ['pink','blue','yellow','orange','green'];
    //利用循环上色
    for( var j in arrColor){
       //上色
        ulArr[j].style.backgroundColor = arrColor[j];
        olArr[j].style.backgroundColor = arrColor[j];

        //属性绑定索引
        olArr[j].index = j;
        olArr[j].onclick = function () {
            target = ulArr[this.index].offsetTop;
            //先清理定时器
            clearInterval(timer);
            timer = setInterval(function () {
                var step = (target-leader)/10;
                step = step>0?Math.ceil(step):Math.floor(step);
                leader +=step;
                window.scrollTo(0,leader);
                if(Math.abs(target-leader)<=Math.abs(step)){
                    window.scrollTo(0,target);
                    clearInterval(timer);
                }
            },25)
        }


        //4.用scroll事件模拟盒子距离最顶端的距离。
        window.onscroll = function () {
            //每次屏幕滑动，把屏幕卷去的头部赋值给leader,模拟获取显示区域距离顶部的距离
            leader = scroll().top;
        }
    }
</script>
</body>
</html>